<template>
	<view class="evaluate">
		<view class="content">
			<view class="part" v-for="(item,index) in datas" :key='index'>
				<view class="shopInfo">
					<view class="shop dFlex jStart_aStart">
						<view class="shopImg imgPublic">
							<image :src="item.shopImg"></image>
						</view>
						<view class="other">
							<view class="shopName">{{item.title}}</view>
							<view class="price">¥{{item.price}}</view>
						</view>
					</view>
					<view class="score dFlex jBetween_aCenter">
						<view class="lineTit">商品评价</view>
						<view class="rateBox dFlex jEnd_aCenter">
							<u-rate :count="5" inactive-color='#e8e8e8' v-model='item.bb_score' active-color='#FFB800' size='40'></u-rate>
						</view>
					</view>
				</view>
				<view class="comment">
					<view class="desc">
						<textarea name="" id="" cols="30" rows="10" v-model="item.content" placeholder="看起来宝贝不错,快给小伙伴分享宝贝的优点吧~"></textarea>
					</view>
					<view class="title">图片上传</view>
					<view class="imgs dFlex jStart_aCenter fWap">
						<view class="imgList dFlex jStart_aCenter fWap">
							<view class="imgOne " v-for="(item2,index2) in item.imgArr" :key='index'>
								<image :src="item2" mode="widthFix" @tap.stop='lookBig(index2,index)'></image>
								<view class="delIcon imgPublic" @tap.stop='delImg(index,index2)'>
									<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/del.png" mode="widthFix"></image>
								</view>
							</view>
							<view class="upImg imgPublic" @tap.stop='upImg(index)' v-if="item.imgArr.length<9">
								<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/upTool2.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="anonymous dFlex jBetween_aCenter">
					<view class="status dFlex jStart_aCenter" @tap.stop='change_anonymous(index)'>
						<view class="statusIcon imgPublic">
							<image v-if="item.is_anonymous == '1'" src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/unsel.png" mode="widthFix"></image>
							<image v-if="item.is_anonymous == '0'" src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/sel.png" mode="widthFix"></image>
						</view>
						<text>匿名评价</text>
					</view>
					<text>评价将以匿名的形式展现</text>
				</view>
				<view class="multiple">
					<view class="title">服务打分</view>
					<view class="lines">
						<view class="line dFlex jBetween_aCenter">
							<view class="lineTit">商家服务</view>
							<view class="rateBox dFlex jEnd_aCenter">
								<u-rate :count="5" inactive-color='#e8e8e8' v-model='item.sj_score' active-color='#FFB800' size='40'></u-rate>
							</view>
						</view>
						<view class="line dFlex jBetween_aCenter">
							<view class="lineTit">发货物流</view>
							<view class="rateBox dFlex jEnd_aCenter">
								<u-rate :count="5" inactive-color='#e8e8e8' v-model='item.fh_score' active-color='#FFB800' size='40'></u-rate>
							</view>
						</view>
						<view class="line dFlex jBetween_aCenter">
							<view class="lineTit">综合评分</view>
							<view class="rateBox dFlex jEnd_aCenter">
								<u-rate :count="5" inactive-color='#e8e8e8' v-model='item.zh_score' active-color='#FFB800' size='40'></u-rate>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btns" @tap.stop='subInfo' v-if="btnFlag">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId:'',
				datas:[],
				btnFlag:false,
			};
		},
		onLoad(e) {
			this.orderId = e.id;
			this.initData();
		},
		onShow(){
			
		},
		onShareAppMessage() {
			this.tool.monitor();
			return {
				title:'加一精选',
				path:'/pages/seller',
				imageUrl:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png',
				desc:'这里有众多优质好物等您来选择',
			} 
		},
		onShareTimeline() {
			this.tool.monitor();
			let share = {
				title:'加一精选',
				path:'/pages/seller',
				imageUrl:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png',
				desc:'这里有众多优质好物等您来选择',
			}
			return share;
		},
		methods:{
			initData(){
				this.tool.getData('/api/mall/orderList',{
					ids:this.orderId
				}).then(res=>{
					if(res){
						res[0].ordergoods.map((item,index)=>{
							if(item.is_commented == 0){
								console.log(item.goods.main_img);
								let line = {
									ogid:item.id,
									title:item.goods.title,
									shopImg:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com'+item.goods.main_img,
									price:item.goods.price,
									content:'',
									imgArr:[],
									zh_score:5,
									bb_score:5,
									sj_score:5,
									fh_score:5,
									is_anonymous:'1',
								}
								this.datas.push(line);
								this.btnFlag = true;
							}
						})
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 提交评价信息
			subInfo(){
				this.datas.map((item,index)=>{
					if(!item.content){
						uni.showToast({
							title:"请简单描述收到的商品",
							icon:"none"
						})
						return;
					}
					item.images = item.imgArr.join(',');
				})
				this.tool.getData('/api/mall/commentGoods',{
					params:JSON.stringify(this.datas),
				}).then(res=>{
					if(res){
						uni.showToast({
							title:"评价内容已提交",
							icon:"success"
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1650)
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 修改是否匿名状态
			change_anonymous(idx){
				let line = this.datas[idx];
				line.is_anonymous = line.is_anonymous == '0'?'1':'0';
			},
			// 上传图片
			upImg(idx){
				let line = this.datas[idx];
				let len = 9-line.imgArr.length>0?9-line.imgArr.length:0;
				uni.chooseImage({
					count:len,
					sizeType:['original','compressed'],
					sourceType:['camera','album'],
					success: (file) => {
						if(file.tempFilePaths.length){
							file.tempFilePaths.map((item,index)=>{
								this.tool.upImg(item).then(thumb=>{
									if(thumb){
										line.imgArr.push(thumb.fullurl);
									}
								}).catch(err=>{
									console.log(err);
								})
							})
						}
					},
					fail:(err)=>{
						console.log(err);
					}
				})
			},
			// 删除图片
			delImg(idx,idx2){
				let line = this.datas[idx];
				line.imgArr.splice(idx2,1);
			},
			// 查看大图
			lookBig(thumb,idx){
				let line = this.datas[idx];
				uni.previewImage({
					current:thumb,
					urls:line.imgArr,
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: white;
	}
	.evaluate{
		width: 100%;
		.content{
			width: 100%;
			overflow: auto;
			-webkit-overflow-scrolling: touch;
			.part{
				width: 100%;
				margin-bottom: 8px;
				padding: 0 30rpx;
				box-sizing: border-box;
				border-bottom: 8px solid #F4F4F4;
				.anonymous{
					width: 100%;
					padding: 30rpx 0;
					color: #666666;
					font-size: 13px;
					.status{
						font-size: 15px;
						color: #333333;
						.statusIcon{
							width: 40rpx;
							height:40rpx;
							margin-right: 8rpx;
						}
					}
				}
				.comment{
					width: 100%;
					padding: 30rpx 0;
					border-top: 1px solid #F4F4F4;
					border-bottom: 1px solid #F4F4F4;
					.imgs{
						width: 100%;
						.imgList{
							.imgOne{
								width: 210rpx;
								height: 210rpx;
								margin-right: 20rpx;
								margin-bottom: 20rpx;
								position: relative;
								.delIcon{
									width: 30rpx;
									height: 30rpx;
									position: absolute;
									top:-15rpx;
									right: -15rpx;
								}
							}
							.imgOne:nth-child(3n+3){
								margin-right: 0;
							}
						}
						.upImg{
							margin-bottom: 20rpx;
							width: 210rpx;
							height: 210rpx;
						}
					}
					.title{
						width: 100%;
						margin: 30rpx 0 24rpx;
					}
					.desc{
						width:100%;
						background: #F4F4F4;
						border-radius: 16rpx;
						padding: 30rpx;
						box-sizing: border-box;
					}
				}
				.shopInfo{
					width: 100%;
					padding: 30rpx 0 18rpx;
					box-sizing: border-box;
					.score{
						width: 100%;
						font-size: 17px;
						font-weight: bold;
						.rateBox{
							flex: 1;
							color: #666666;
							>text{
								display: inline-block;
								font-weight: 400;
								margin-right: 24rpx;
							}
						}
					}
					.shop{
						width: 100%;
						margin-bottom: 34rpx;
						.other{
							flex: 1;
							.shopName{
								font-size: 15px;
								line-height: 50rpx;
								font-weight: bold;
								margin-bottom: 16rpx;
							}
							.price{
								color: #666666;
								font-size: 15px;
							}
						}
						.shopImg{
							width: 155rpx;
							height: 155rpx;
							margin-right: 16rpx;
							image{
								width: 155rpx;
								height: 155rpx;
							}
						}
					}
				}
				.multiple{
					width: 100%;
					padding: 30rpx 0;
					box-sizing: border-box;
					.title{
						width: 100%;
						font-size: 17px;
						font-weight: bold;
					}
					
					.lines{
						width: 100%;
						.line{
							width: 100%;
							margin-top: 26rpx;
							font-size: 15px;
						}
					}
				}
			}
			.part:last-child{
				margin: 0;
				border: none;
			}
			.btns{
				width: 80%;
				text-align: center;
				background: $col_active;
				color: white;
				border-radius: 50px;
				padding: 22rpx 0;
				font-size: 16px;
				margin: 60rpx auto;
				font-weight: bold;
			}
		}
	}
</style>
